<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改标题</a>
    <a class="layui-btn  layui-btn-xs" lay-event="edit3">修改作者</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit2">修改日期</a>
    <a class="layui-btn  layui-btn-xs layui-btn-normal" lay-event="edit1">修改内容</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<style type="text/css">

    .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }
</style>
<script type="text/html" id="imgTemp">
    <img src="{{d.imgUrl}}">
</script>
<script src="../layui/layui.js" charset="utf-8"></script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: 'http://localhost:8080/news'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'ID', title: 'ID', width: '5%', fixed: 'left', unresize: true, sort: true}
                , {field: 'title', title: '标题', width: '12%', edit: 'text'}
                , {field: 'author', title: '作者', width: '5%', edit: 'text',}
                , {field: 'date', title: '日期', width: '12%', sort: true, edit: 'text'}
                , {field: 'type', title: '类型', width: '5%', edit: 'text'}
                , {field: 'content', title: '内容', width: '20%', edit: 'text'}
                , {field: 'imgUrl', title: '配图', width: '10%', templet: '#imgTemp'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: '27%'}
            ]]
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            var ID = data.ID;
            if (obj.event === 'del') {
                layer.confirm('真的删除么', function (index) {
                    $.get('http://localhost:8080/delNews?ID=' + ID, function (data, status) {
                        if (data.code == "200") {
                            layer.msg(data.messages);
                            obj.del();
                            layer.close(index);
                        } else {
                            layer.msg(data.messages)
                        }
                    });
                });
            }
            if (obj.event === 'edit') {
                layer.prompt({
                    formType: 3
                    , value: data.title,
                }, function (value, index) {
                    $.get('http://localhost:8080/alterNews?title=' + value+"&ID="+data.ID, function (data) {
                        if (data.code == "200") {
                            obj.update({
                                title: value
                            });
                            layer.close(index);
                            layer.msg(data.messages);
                        } else {
                            layer.msg(data.messages)
                        }
                    });
                });
            }
            if (obj.event === 'edit1') {
                layer.prompt({
                    formType: 2
                    , value: data.content,
                }, function (value, index) {
                    $.get('http://localhost:8080/alterNews?content=' + value+"&ID="+data.ID, function (data) {
                        if (data.code == "200") {
                            obj.update({
                                content: value
                            });
                            layer.msg(data.messages)
                            layer.close(index);
                        } else {
                            layer.msg(data.messages)
                        }
                    });
                });
            }
            if (obj.event === 'edit2') {
                layer.prompt({
                    formType: 3
                    , value: data.date,
                }, function (value, index) {
                    $.get('http://localhost:8080/alterNews?date=' + value+"&ID="+data.ID, function (data) {
                        if (data.code == "200") {
                            obj.update({
                                date: value
                            });
                            layer.msg(data.messages)
                            layer.close(index);
                        } else {
                            layer.msg(data.messages)
                        }
                    });
                });
            }
            if (obj.event === 'edit3') {
                layer.prompt({
                    formType: 3
                    , value: data.author,
                }, function (value, index) {
                    $.get('http://localhost:8080/alterNews?author=' + value+"&ID="+data.ID, function (data) {
                        if (data.code == "200") {
                            obj.update({
                                author: value
                            });
                            layer.msg(data.messages)
                            layer.close(index);
                        } else {
                            layer.msg(data.messages)
                        }
                    });
                });
            }
        });
    });
</script>



<!--修改表单-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px" >
            <div class="layui-form-item">
                <label class="layui-form-label">单条新闻整体修改</label>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-block">
                    <input type="text" name="author"  required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">修改</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>